// Name:            Alert
//
// Description:     Define style for alert messages
//
// Component:       `.am-alert`
//
// Sub-objects:     `.am-alert-close`
//
// Modifiers:       `.am-alert-success`
//                  `.am-alert-warning`
//                  `.am-alert-danger`
//                  `.am-alert-secondary`
//
// Uses:            Close: `.am-close`
//
// =============================================================================
// Variables
// =============================================================================
@alert-margin-vertical: 1em;
@alert-padding: 0.625em;
@alert-background: @global-primary;
@alert-color: #fff;
@alert-success-background: @global-success;
@alert-success-color: #fff;
@alert-warning-background: @global-warning;
@alert-warning-color: #fff;
@alert-danger-background: @global-danger;
@alert-danger-color: #fff;
@alert-secondary-background: @gray-lighter;
@alert-secondary-color: @gray;
// Alert mixin
// -----------------------------------------------------------------------------
.alert-variant(@background; @border; @text-color) {
    background-color: @background;
    border-color: @border;
    color: @text-color;
}


/* ==========================================================================
   Component: Alert Plugin
 ============================================================================ */

.@{ns}alert {
    margin-bottom: @alert-margin-vertical;
    padding: @alert-padding;
    background: @alert-background;
    color: @alert-color;
    border: 1px solid darken(@global-primary, 6%);
    border-radius: @global-radius;
    a {
        color: @white;
    }
    .hook-alert;
    // Keep color for headings if the default heading color is changed
    h1, h2, h3, h4, h5, h6 {
        color: inherit;
    }
    .@{ns}close {
        opacity: .4;
        &:hover {
            opacity: .6;
        }
    }
}


/* Add margin if adjacent element */

*+.@{ns}alert {
    margin-top: @alert-margin-vertical;
}


/* Remove margin from the last-child */

.@{ns}alert> :last-child {
    margin-bottom: 0;
}


/* within am-form-group */

.@{ns}form-group .@{ns}alert {
    margin: 5px 0 0;
    padding: 0.25em 0.625em;
    font-size: 1.3rem;
}


/* Close in alert */

.@{ns}alert>.@{ns}close:first-child {
    float: right;
    height: auto;
    margin: -3px -5px auto auto;
}


/* Remove margin from adjacent element */

.@{ns}alert>.@{ns}close:first-child+* {
    margin-top: 0;
}

// Modifiers
// =============================================================================
.@{ns}alert-secondary {
    .alert-variant(@alert-secondary-background, darken(@alert-secondary-background, 6%), @alert-secondary-color);
    .hook-alert-secondary;
}

.@{ns}alert-success {
    .alert-variant(@alert-success-background, darken(@alert-success-background, 6%), @alert-success-color);
    .hook-alert-success;
}

.@{ns}alert-warning {
    .alert-variant(@alert-warning-background, darken(@alert-warning-background, 6%), @alert-warning-color);
    .hook-alert-warning;
}

.@{ns}alert-danger {
    .alert-variant(@alert-danger-background, darken(@alert-danger-background, 6%), @alert-danger-color);
    .hook-alert-danger;
}

// Misc
// =============================================================================
.hook-alert-misc;
// Hooks
// =============================================================================
.hook-alert() {}

.hook-alert-secondary() {}

.hook-alert-success() {}

.hook-alert-warning() {}

.hook-alert-danger() {}

.hook-alert-misc() {}
